import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import FormHead from "@/components/custom-ui/form-head";
import { useTranslation } from "react-i18next";
import { useUserStore } from "@/stores";

export default function Cas() {
  const { t } = useTranslation();
  const { user } = useUserStore();
  return (
    <div className="flex items-center justify-center py-12">
      <Card className="w-full min-w-xs max-w-md border border-white/20">
        <CardHeader className="text-center">
          <FormHead />
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            {!user ? (
              <Button asChild className="w-full" size="lg">
                <Link to="/cas/login">
                  {t("Sign In", { defaultValue: "Sign In" })}
                </Link>
              </Button>
            ) : null}
            {!user ? (
              <Button asChild variant="outline" className="w-full" size="lg">
                <Link to="/cas/register">
                  {t("Sign Up", { defaultValue: "Sign Up" })}
                </Link>
              </Button>
            ) : null}
            {!user ? (
              <Button asChild variant="ghost" className="w-full" size="lg">
                <Link to="/cas/forgot">
                  {t("Forgot Password", { defaultValue: "Forgot Password" })}
                </Link>
              </Button>
            ) : null}
            <div className="pt-4 border-t border-gray-200">
              <Button asChild variant="secondary" className="w-full" size="lg">
                <Link to="/cas/profile">
                  {t("View Profile", { defaultValue: "View Profile" })}
                </Link>
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
